<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        HIUI 前端页面框架 - 视图组件
    </title>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="../../styles/hiui.css">
    <link rel="stylesheet" type="text/css" href="../../styles/site.css">
    <script type="text/javascript" src="../../scripts/vendor.js"></script>
    <script type="text/javascript" src="../../scripts/hi.js"></script>

<body>
    
    <div class="site-header">
    <div class="site-container">
        <a class="logo">HIUI 前端框架</a>
    </div>
</div>
    <div class="site-container">
        <div class="site-tree">
            
<ul class="site-nav">
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">基础说明</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#start" class="site-nav-link">开始使用</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#module" class="site-nav-link">模块规范</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#issue" class="site-nav-link">常见问题</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#log" class="site-nav-link">更新日志</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">基础组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#normalize" class="site-nav-link">Normalize 排版</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#grid" class="site-nav-link">Grid 栅格系统</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#layout" class="site-nav-link">Layout 布局</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#font" class="site-nav-link">Font 字体图标</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#color" class="site-nav-link">Color 主题色彩</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#button" class="site-nav-link">Button 按钮</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#link" class="site-nav-link">Link 链接</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#animation" class="site-nav-link">Animation 动画</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#loading" class="site-nav-link">Loading CSS3 加载</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#assist" class="site-nav-link">Assist 辅助</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">表格</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#base" class="site-nav-link">Table 基础表格</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#responsive" class="site-nav-link">TableResponsive 数据表格</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#data" class="site-nav-link">DataTable 数据表格</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">表单组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#input" class="site-nav-link">Input 输入框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#select" class="site-nav-link">Select 选择框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#radio" class="site-nav-link">Radio 单选框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#checkbox" class="site-nav-link">Checkbox 多选框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#switch" class="site-nav-link">Switch 开关</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#autocomplete" class="site-nav-link">Autocomplete 自动完成</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#slider" class="site-nav-link">Slider 滑块</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#timepicker" class="site-nav-link">TimePicker 时间选择</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#rate" class="site-nav-link">Rate 评分</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#colorpicker" class="site-nav-link">ColorPicker 颜色选择器</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#inputnumber" class="site-nav-link">InputNumber 数字输入框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#cascader" class="site-nav-link">Cascader 级联选择</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#transfer" class="site-nav-link">Transfer 穿梭框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">视图组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#timeline" class="site-nav-link">Timeline 时间线</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#step" class="site-nav-link">Step 步骤条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tag" class="site-nav-link">Tag 标签</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tag" class="site-nav-link">Badge 徽标数</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#alert" class="site-nav-link">Alert 警告框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#avatar" class="site-nav-link">Avatar 头像</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#card" class="site-nav-link">Card 卡片</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#empty" class="site-nav-link">Empty 空状态</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#list" class="site-nav-link">List 列表</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#header" class="site-nav-link">Header 页头</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#article" class="site-nav-link">Article 文章</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#comment" class="site-nav-link">Comment 评论</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#skeleton" class="site-nav-link">Skeleton 骨架图</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#result" class="site-nav-link">Result 结果页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#divider" class="site-nav-link">Divider 分割线</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Progress 进度条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Tree 树形结构</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Popover 气泡卡片</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#loadingbar" class="site-nav-link">LoadingBar 加载进度条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#pagination" class="site-nav-link">Pagination 分页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#message" class="site-nav-link">Message 全局提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#notice" class="site-nav-link">Notice 通知提醒</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#dialog" class="site-nav-link">Dialog 模态框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#collapse" class="site-nav-link">Collapse 折叠面板</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tooltip" class="site-nav-link">Tooltip 文字提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#poptip" class="site-nav-link">Poptip 气泡提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#carousel" class="site-nav-link">Carousel 走马灯</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">导航组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#menu" class="site-nav-link">Menu 导航菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#dropdown" class="site-nav-link">Dropdown 下拉菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#tab" class="site-nav-link">Tab 标签页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#breadcrumb" class="site-nav-link">Breadcrumb 面包屑</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#aside" class="site-nav-link">Aside 左右模态框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">操作反馈</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#menu" class="site-nav-link">Menu 导航菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#dropdown" class="site-nav-link">Dropdown 下拉菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#tab" class="site-nav-link">Tab 标签页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#breadcrumb" class="site-nav-link">Breadcrumb 面包屑</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#aside" class="site-nav-link">Aside 左右模态框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">其他</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#affix" class="site-nav-link">Anchor 锚点</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#affix" class="site-nav-link">Affix 图钉</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#backtop" class="site-nav-link">BackTop 返回顶部</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#upload" class="site-nav-link">Upload 文件上传</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#validation" class="site-nav-link">Validation 表单验证</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#template" class="site-nav-link">Template 模版引擎</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#code" class="site-nav-link">Code 代码修饰器</a>
    </li>
    
    
</ul>
        </div>
        <div class="site-content">
            <h3 class="site-title">Timeline 时间线<a name="timeline">#</a></h3>
            <div class="site-info">
                <p>基础使用</p>
                <ul class="timeline">
                    <li class="timeline-item">
                        <span class="timeline-tail"></span>
                        <span class="timeline-head"></span>
                        <div class="timeline-block">
                            <p class="timeline-text">发布1.0版本</p>
                        </div>
                    </li>
                    <li class="timeline-item">
                        <span class="timeline-tail"></span>
                        <span class="timeline-head"></span>
                        <div class="timeline-block">
                            <p class="timeline-text">发布2.0版本</p>
                        </div>
                    </li>
                    <li class="timeline-item">
                        <span class="timeline-head"></span>
                        <div class="timeline-block">
                            <p class="timeline-text">发布3.0版本</p>
                        </div>
                    </li>
                </ul>
                <p>时间轴</p>
                <ul class="timeline timeline-vertical">
                    <li class="timeline-item">
                        <span class="timeline-tail"></span>
                        <span class="timeline-icon hiicon hiicon-trophy"></span>
                        <div class="timeline-block">
                            <h3 class="timeline-title">会议</h3>
                            <p class="timeline-text">上一年的销售业绩发布会。总结产品营销和销售趋势及销售的现状。</p>
                            <span class="timeline-date">
                                今天 <small>10月1号</small>
                            </span>
                        </div>
                    </li>
                    <li class="timeline-item">
                        <span class="timeline-tail"></span>
                        <span class="timeline-icon hiicon hiicon-trophy"></span>
                        <div class="timeline-block">
                            <h3 class="timeline-title">下载文档</h3>
                            <p class="timeline-text">发送上年度《销售业绩报告》</p>
                            <span class="timeline-date">
                                今天 <small>10月1号</small>
                            </span>
                        </div>
                    </li>
                    <li class="timeline-item">
                        <span class="timeline-icon hiicon hiicon-trophy"></span>
                        <div class="timeline-block">
                            <h3 class="timeline-title">休息</h3>
                            <p class="timeline-text">喝咖啡啦，啦啦啦~~</p>
                            <span class="timeline-date">
                                今天 <small>10月1号</small>
                            </span>
                        </div>
                    </li>
                </ul>
                <p>交替展现</p>
                <ul class="timeline timeline-alternate">
                    <li class="timeline-item timeline-item-right">
                        <span class="timeline-tail"></span>
                        <span class="timeline-head"></span>
                        <div class="timeline-block">
                            <p class="timeline-text">上一年的销售业绩发布会。总结产品营销和销售趋势及销售的现状。</p>
                            <span class="timeline-date">
                                <small>10月1号</small>
                            </span>
                        </div>
                    </li>
                    <li class="timeline-item timeline-item-left">
                        <span class="timeline-tail"></span>
                        <span class="timeline-head"></span>
                        <div class="timeline-block">
                            <p class="timeline-text">发送上年度《销售业绩报告》</p>
                            <span class="timeline-date">
                                <small>6月1号</small>
                            </span>
                        </div>
                    </li>
                    <li class="timeline-item timeline-item-right">
                        <span class="timeline-tail"></span>
                        <span class="timeline-icon hiicon hiicon-trophy"></span>
                        <div class="timeline-block">
                            <p class="timeline-text">喝咖啡啦，啦啦啦~~</p>
                            <span class="timeline-date">
                                <small>3月1号</small>
                            </span>
                        </div>
                    </li>
                    <li class="timeline-item timeline-item-left">
                        <span class="timeline-head"></span>
                        <div class="timeline-block">
                            <p class="timeline-text">发布4.0版本</p>
                            <span class="timeline-date">
                                <small>1月1号</small>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
            <h3 class="site-title">Step 步骤条<a name="step">#</a></h3>
            <div class="site-info">
                <p>基础使用</p>
                <div class="step">
                    <div class="step-item step-finished">
                        <span class="step-tail"></span>
                        <span class="step-icon hiicon hiicon-check"></span>
                        <span class="step-block">
                            <h3 class="step-title">完成</h3>
                            <p class="step-text">这是一段描述这是一段描述</p>
                        </span>
                    </div>
                    <div class="step-item step-progress">
                        <span class="step-tail"></span>
                        <span class="step-icon">2</span>
                        <span class="step-block">
                            <h3 class="step-title">进行中</h3>
                            <p class="step-text">这是一段描述</p>
                        </span>
                    </div>
                    <div class="step-item step-wait">
                        <span class="step-icon">3</span>
                        <span class="step-block">
                            <h3 class="step-title">等待进行</h3>
                            <p class="step-text">这是一段描述</p>
                        </span>
                    </div>
                </div>
                <p>迷你版本</p>
                <div class="step">
                    <div class="step-item step-finished">
                        <span class="step-tail"></span>
                        <span class="step-icon hiicon hiicon-check"></span>
                        <span class="step-block">
                            <h3 class="step-title">完成</h3>
                        </span>
                    </div>
                    <div class="step-item step-progress">
                        <span class="step-tail"></span>
                        <span class="step-icon">2</span>
                        <span class="step-block">
                            <h3 class="step-title">进行中</h3>
                        </span>
                    </div>
                    <div class="step-item step-wait">
                        <span class="step-icon">3</span>
                        <span class="step-block">
                            <h3 class="step-title">等待进行</h3>
                        </span>
                    </div>
                </div>
                <p>竖直版本</p>
                <div class="step step-vertical">
                    <div class="step-item step-finished">
                        <span class="step-tail"></span>
                        <span class="step-icon hiicon hiicon-check"></span>
                        <span class="step-block">
                            <h3 class="step-title">完成</h3>
                            <p class="step-text">这是一段描述这是一段描述</p>
                        </span>
                    </div>
                    <div class="step-item step-progress">
                        <span class="step-tail"></span>
                        <span class="step-icon">2</span>
                        <span class="step-block">
                            <h3 class="step-title">进行中</h3>
                            <p class="step-text">这是一段描述</p>
                        </span>
                    </div>
                    <div class="step-item step-wait">
                        <span class="step-icon">3</span>
                        <span class="step-block">
                            <h3 class="step-title">等待进行</h3>
                            <p class="step-text">这是一段描述</p>
                        </span>
                    </div>
                </div>
            </div>
            <h3 class="site-title">Tag 标签<a name="tag">#</a></h3>
            <div class="site-info">
                <p>默认标签</p>
                <span class="tag">标签1</span>
                <p>实心标签</p>
                <span class="tag tag-primary">标签1</span>
                <span class="tag tag-info">标签2</span>
                <span class="tag tag-success">标签3</span>
                <span class="tag tag-warning">标签4</span>
                <span class="tag tag-danger">标签5</span>
                <p>镂空标签</p>
                <span class="tag tag-primary-outline">标签1</span>
                <span class="tag tag-info-outline">标签2</span>
                <span class="tag tag-success-outline">标签3</span>
                <span class="tag tag-warning-outline">标签4</span>
                <span class="tag tag-danger-outline">标签5</span>
            </div>
            <h3 class="site-title">Badge 徽标数<a name="badge">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <span class="badge">
                    <a href="javascript:;" style="display:block;width:40px;height:40px;border-radius:2px;background-color:#ccc;"></a>
                    <sup class="badge-count">0</sup>
                </span>
                <p>小红点</p>
                <span class="badge">
                    <a href="javascript:;" style="display:block;width:40px;height:40px;border-radius:2px;background-color:#ccc;"></a>
                    <sup class="badge-dot"></sup>
                </span>
                <p>单独使用</p>
                <span class="badge badge-single">
                    <sup class="badge-count">0</sup>
                </span>
                <span class="badge badge-single">
                    <sup class="badge-count" style="background-color: #fff;color:#333;border-color:#eee;">99</sup>
                </span>
                <span class="badge badge-single">
                    <sup class="badge-count" style="background-color: #52c41a;color:#fff;border-color:#eee;">99+</sup>
                </span>
            </div>
            <h3 class="site-title">Alert 警告框<a name="alert">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <div class="alert alert-info">消息</div>
                <div class="alert alert-success">成功</div>
                <div class="alert alert-warning">警告</div>
                <div class="alert alert-danger">失败</div>
                <p>带图标</p>
                <div class="alert alert-info alert-has-icon">
                    <span class="alert-icon hiicon hiicon-info-circle-fill"></span>
                    消息
                </div>
                <div class="alert alert-success alert-has-icon">
                    <span class="alert-icon hiicon hiicon-check-circle-fill"></span>
                    成功
                </div>
                <div class="alert alert-warning alert-has-icon">
                    <span class="alert-icon hiicon hiicon-warning-circle-fill"></span>
                    警告
                </div>
                <div class="alert alert-danger alert-has-icon">
                    <span class="alert-icon hiicon hiicon-close-circle-fill"></span>
                    失败
                </div>
                <p>带描述</p>
                <div class="alert alert-info alert-has-desc">
                    <span class="alert-icon hiicon hiicon-info-circle"></span>
                    <div class="alert-title">消息</div>
                    <div class="alert-desc">这是一个<a href="javascript:;">链接</a></div>
                </div>
                <div class="alert alert-success alert-has-desc">
                    <span class="alert-icon hiicon hiicon-check-circle"></span>
                    <div class="alert-title">成功</div>
                    <div class="alert-desc">这是一段描述</div>
                </div>
                <div class="alert alert-warning alert-has-desc">
                    <span class="alert-icon hiicon hiicon-warning-circle"></span>
                    <div class="alert-title">警告</div>
                    <div class="alert-desc">这是一段描述</div>
                </div>
                <div class="alert alert-danger alert-has-desc">
                    <span class="alert-icon hiicon hiicon-close-circle"></span>
                    <div class="alert-title">失败</div>
                    <div class="alert-desc">这是一段描述</div>
                </div>
                <p>可关闭</p>
                <div class="alert alert-info alert-has-close">
                    <div class="alert-title">消息</div>
                    <div class="alert-desc">这是一段描述</div>
                    <span class="alert-close-icon hiicon hiicon-close"></span>
                </div>
                <div class="alert alert-success alert-has-close">
                    <div class="alert-title">成功</div>
                    <div class="alert-desc">这是一段描述</div>
                    <span class="alert-close-icon hiicon hiicon-close"></span>
                </div>
                <div class="alert alert-warning alert-has-close">
                    <div class="alert-title">警告</div>
                    <div class="alert-desc">这是一段描述</div>
                    <span class="alert-close-icon hiicon hiicon-close"></span>
                </div>
                <div class="alert alert-danger alert-has-close">
                    <div class="alert-title">失败</div>
                    <div class="alert-desc">这是一段描述</div>
                    <span class="alert-close-icon hiicon hiicon-close"></span>
                </div>
                <p>带描述可关闭</p>
                <div class="alert alert-info alert-has-desc alert-has-close">
                    <span class="alert-icon hiicon hiicon-info-circle"></span>
                    <div class="alert-title">消息</div>
                    <div class="alert-desc">这是一段描述</div>
                    <span class="alert-close-icon hiicon hiicon-close"></span>
                </div>
                <div class="alert alert-success alert-has-desc alert-has-close">
                    <span class="alert-icon hiicon hiicon-check-circle"></span>
                    <div class="alert-title">成功</div>
                    <div class="alert-desc">这是一段描述</div>
                    <span class="alert-close-icon hiicon hiicon-close"></span>
                </div>
                <div class="alert alert-warning alert-has-desc alert-has-close">
                    <span class="alert-icon hiicon hiicon-warning-circle"></span>
                    <div class="alert-title">警告</div>
                    <div class="alert-desc">这是一段描述</div>
                    <span class="alert-close-icon hiicon hiicon-close"></span>
                </div>
                <div class="alert alert-danger alert-has-desc alert-has-close">
                    <span class="alert-icon hiicon hiicon-close-circle"></span>
                    <div class="alert-title">失败</div>
                    <div class="alert-desc">这是一段描述</div>
                    <span class="alert-close-icon hiicon hiicon-close"></span>
                </div>
            </div>
            <h3 class="site-title">Avatar 头像<a name="avatar">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <span class="avatar">
                    <img src="http://placehold.it/100x100/1890ff/ffffff?text=U" alt="">
                </span>
                <span class="avatar avatar-circle">
                    <img src="http://placehold.it/100x100/1890ff/ffffff?text=U" alt="">
                </span>
                <p>支持类型：图片，icon，字符</p>
                <span class="avatar avatar-img">
                    <img src="http://placehold.it/100x100/1890ff/ffffff?text=U" alt="">
                </span>
                <span class="avatar avatar-icon">
                    <span class="hiicon hiicon-user"></span>
                </span>
                <span class="avatar">
                    <span class="avatar-text">U</span>
                </span>
            </div>
            <h3 class="site-title">Card 卡片<a name="card">#</a></h3>
            <div class="site-info">
                <p>基础使用</p>
                <div class="card" style="width: 375px;">
                    <div class="card-head">
                        <h3 class="card-title">卡片标题</h3>
                        <div class="card-extra">
                            <a class="btn-link" href="javascript:;">更多>></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">卡片标题</h3>
                        <p class="card-text">这里是卡片内容，占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符</p>
                        <p class="card-text"><small class="text-secondary">最后一次更新 3分钟前</small></p>
                    </div>
                    <div class="card-foot">
                        <div class="row text-center">
                            <div class="col-4">
                                <button class="btn btn-link">
                                    <span class="hiicon hiicon-setting"></span>
                                </button>
                            </div>
                            <div class="col-4">
                                <button class="btn btn-link">
                                    <span class="hiicon hiicon-edit"></span>
                                </button>
                            </div>
                            <div class="col-4">
                                <button class="btn btn-link">
                                    <span class="hiicon hiicon-ellipsis"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <p>顶部带图片的卡片</p>
                <div class="card" style="width: 375px;">
                    <div class="card-img-top">
                        <img src="../images/card.jpg" class="card-img">
                    </div>
                    <div class="card-body">
                        <p class="card-text">这里是卡片内容，占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符</p>
                        <p class="card-text"><small class="text-secondary">最后一次更新 3分钟前</small></p>
                    </div>
                    <div class="card-foot">
                        <div class="row text-center">
                            <div class="col-4">
                                <button class="btn btn-link">
                                    <span class="hiicon hiicon-setting"></span>
                                </button>
                            </div>
                            <div class="col-4">
                                <button class="btn btn-link">
                                    <span class="hiicon hiicon-edit"></span>
                                </button>
                            </div>
                            <div class="col-4">
                                <button class="btn btn-link">
                                    <span class="hiicon hiicon-ellipsis"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <p>左边带图片的卡片</p>
                <div class="card" style="width: 375px;">
                    <div class="card-body">
                        
                        <div class="card-media">
                            <div class="card-media-left">
                                <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" class="card-img">
                            </div>
                            <div class="card-media-block">
                                <h3 class="card-media-title">卡片标题</h3>
                                <p class="card-media-text">这里是描述，这里是描述，这里是描述，这里是描述。</p>
                            </div>
                        </div>
                        
                        <div class="card-media">
                            <div class="card-media-left">
                                <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" class="card-img">
                            </div>
                            <div class="card-media-block">
                                <h3 class="card-media-title">卡片标题</h3>
                                <p class="card-media-text">这里是描述，这里是描述，这里是描述，这里是描述。</p>
                            </div>
                        </div>
                        
                        <div class="card-media">
                            <div class="card-media-left">
                                <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" class="card-img">
                            </div>
                            <div class="card-media-block">
                                <h3 class="card-media-title">卡片标题</h3>
                                <p class="card-media-text">这里是描述，这里是描述，这里是描述，这里是描述。</p>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <p>卡片组</p>
                <div class="card-group">
                    
                    <div class="card" style="width: 32%;margin-right: 1.3%;">
                        <div class="card-head">
                            <h3 class="card-title">卡片标题</h3>
                        </div>
                        <div class="card-body">
                            <p class="card-text">这里是卡片内容，占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符</p>
                        </div>
                        <div class="card-foot">
                            <div class="row text-center">
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-setting"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-edit"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-ellipsis"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card" style="width: 32%;margin-right: 1.3%;">
                        <div class="card-head">
                            <h3 class="card-title">卡片标题</h3>
                        </div>
                        <div class="card-body">
                            <p class="card-text">这里是卡片内容，占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符</p>
                        </div>
                        <div class="card-foot">
                            <div class="row text-center">
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-setting"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-edit"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-ellipsis"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card" style="width: 32%;margin-right: 1.3%;">
                        <div class="card-head">
                            <h3 class="card-title">卡片标题</h3>
                        </div>
                        <div class="card-body">
                            <p class="card-text">这里是卡片内容，占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符</p>
                        </div>
                        <div class="card-foot">
                            <div class="row text-center">
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-setting"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-edit"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-ellipsis"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card" style="width: 32%;margin-right: 1.3%;">
                        <div class="card-head">
                            <h3 class="card-title">卡片标题</h3>
                        </div>
                        <div class="card-body">
                            <p class="card-text">这里是卡片内容，占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符</p>
                        </div>
                        <div class="card-foot">
                            <div class="row text-center">
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-setting"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-edit"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-ellipsis"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card" style="width: 32%;margin-right: 1.3%;">
                        <div class="card-head">
                            <h3 class="card-title">卡片标题</h3>
                        </div>
                        <div class="card-body">
                            <p class="card-text">这里是卡片内容，占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符</p>
                        </div>
                        <div class="card-foot">
                            <div class="row text-center">
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-setting"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-edit"></span>
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-link">
                                        <span class="hiicon hiicon-ellipsis"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <h3 class="site-title">Empty 空状态<a name="empty">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <div class="empty list-bordered">
                    <div class="empty-head">
                        <img class="empty-img" src="../images/empty.png" alt="empty">
                    </div>
                    <p class="empty-desc">
                        暂无数据 回到<a href="javascript:;">主页</a>
                    </p>
                    <dvi class="empty-foot">
                        <button class="btn btn-primary">立即创建</button>
                    </dvi>
                </div>
            </div>
            <h3 class="site-title">List 列表<a name="list">#</a></h3>
            <div class="site-info">
                <p>简单纵向列表</p>
                <ul class="list-items">
                    <li class="list-item">这是列表第一行</li>
                    <li class="list-item">这是列表第二行</li>
                    <li class="list-item">这是列表第三行</li>
                </ul>
                <p>简单横向列表</p>
                <ul class="list-items list-inline">
                    <li class="list-item">这是列表第一行</li>
                    <li class="list-item">这是列表第二行</li>
                    <li class="list-item">这是列表第三行</li>
                </ul>
                <p>带顶部和底部</p>
                <div class="list list-bordered">
                    <div class="list-head">标题</div>
                    <div class="list-body">
                        <ul class="list-items">
                            <li class="list-item">
                                这是列表第一行
                                <div class="list-item-right">
                                    <button class="btn btn-link">编辑</button>
                                </div>
                            </li>
                            <li class="list-item">
                                这是列表第二行
                                <div class="list-item-right">
                                    <button class="btn btn-link">编辑</button>
                                </div>
                            </li>
                            <li class="list-item">
                                这是列表第三行
                                <div class="list-item-right">
                                    <button class="btn btn-link">编辑</button>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="list-foot">底部</div>
                </div>
                <p>基础列表</p>
                <div class="list list-bordered">
                    <div class="list-head">标题</div>
                    <div class="list-body">
                        <ul class="list-items">
                            
                            <li class="list-item">
                                <div class="list-meta list-meta-has-extra">
                                    <div class="list-meta-avatar">
                                        <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                    </div>
                                    <div class="list-meta-block">
                                        <h4 class="list-meta-title">标题</h4>
                                        <p class="list-meta-desc">这是一段描述<br>这是一段描述<br>这是一段描述</p>
                                    </div>
                                    <div class="list-meta-extra">
                                        <button class="btn btn-link">编辑</button>
                                        <button class="btn btn-link">删除</button>
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="list-meta list-meta-has-extra">
                                    <div class="list-meta-avatar">
                                        <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                    </div>
                                    <div class="list-meta-block">
                                        <h4 class="list-meta-title">标题</h4>
                                        <p class="list-meta-desc">这是一段描述<br>这是一段描述<br>这是一段描述</p>
                                    </div>
                                    <div class="list-meta-extra">
                                        <button class="btn btn-link">编辑</button>
                                        <button class="btn btn-link">删除</button>
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="list-meta list-meta-has-extra">
                                    <div class="list-meta-avatar">
                                        <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                    </div>
                                    <div class="list-meta-block">
                                        <h4 class="list-meta-title">标题</h4>
                                        <p class="list-meta-desc">这是一段描述<br>这是一段描述<br>这是一段描述</p>
                                    </div>
                                    <div class="list-meta-extra">
                                        <button class="btn btn-link">编辑</button>
                                        <button class="btn btn-link">删除</button>
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="list-meta list-meta-has-extra">
                                    <div class="list-meta-avatar">
                                        <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                    </div>
                                    <div class="list-meta-block">
                                        <h4 class="list-meta-title">标题</h4>
                                        <p class="list-meta-desc">这是一段描述<br>这是一段描述<br>这是一段描述</p>
                                    </div>
                                    <div class="list-meta-extra">
                                        <button class="btn btn-link">编辑</button>
                                        <button class="btn btn-link">删除</button>
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="list-meta list-meta-has-extra">
                                    <div class="list-meta-avatar">
                                        <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                    </div>
                                    <div class="list-meta-block">
                                        <h4 class="list-meta-title">标题</h4>
                                        <p class="list-meta-desc">这是一段描述<br>这是一段描述<br>这是一段描述</p>
                                    </div>
                                    <div class="list-meta-extra">
                                        <button class="btn btn-link">编辑</button>
                                        <button class="btn btn-link">删除</button>
                                    </div>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="list-foot">底部</div>
                </div>
                <p>竖排列表</p>
                <div class="list list-bordered">
                    <div class="list-head">标题</div>
                    <div class="list-body">
                        <ul class="list-items">
                            
                            <li class="list-item">
                                <div class="list-item-main">
                                    <div class="list-meta">
                                        <div class="list-meta-avatar">
                                            <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                        </div>
                                        <div class="list-meta-block">
                                            <h4 class="list-meta-title">标题</h4>
                                            <p class="list-meta-desc">这是一段描述<br>这是一段描述<br><small class="text-secondary">3分钟前</small></p>
                                        </div>
                                    </div>
                                    这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这这里是描述，这里是描述，这里是描述，这里是描述。里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。
                                    <ul class="list-item-action">
                                        <li>
                                            <span class="hiicon hiicon-star"></span> 12
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-like"></span> 34
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-message"></span> 43
                                        </li>
                                    </ul>
                                    <div class="list-item-extra">
                                        <img src="../images/card.jpg" alt="ListImg">
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="list-item-main">
                                    <div class="list-meta">
                                        <div class="list-meta-avatar">
                                            <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                        </div>
                                        <div class="list-meta-block">
                                            <h4 class="list-meta-title">标题</h4>
                                            <p class="list-meta-desc">这是一段描述<br>这是一段描述<br><small class="text-secondary">3分钟前</small></p>
                                        </div>
                                    </div>
                                    这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这这里是描述，这里是描述，这里是描述，这里是描述。里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。
                                    <ul class="list-item-action">
                                        <li>
                                            <span class="hiicon hiicon-star"></span> 12
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-like"></span> 34
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-message"></span> 43
                                        </li>
                                    </ul>
                                    <div class="list-item-extra">
                                        <img src="../images/card.jpg" alt="ListImg">
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="list-item-main">
                                    <div class="list-meta">
                                        <div class="list-meta-avatar">
                                            <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                        </div>
                                        <div class="list-meta-block">
                                            <h4 class="list-meta-title">标题</h4>
                                            <p class="list-meta-desc">这是一段描述<br>这是一段描述<br><small class="text-secondary">3分钟前</small></p>
                                        </div>
                                    </div>
                                    这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这这里是描述，这里是描述，这里是描述，这里是描述。里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。
                                    <ul class="list-item-action">
                                        <li>
                                            <span class="hiicon hiicon-star"></span> 12
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-like"></span> 34
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-message"></span> 43
                                        </li>
                                    </ul>
                                    <div class="list-item-extra">
                                        <img src="../images/card.jpg" alt="ListImg">
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="list-item-main">
                                    <div class="list-meta">
                                        <div class="list-meta-avatar">
                                            <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                        </div>
                                        <div class="list-meta-block">
                                            <h4 class="list-meta-title">标题</h4>
                                            <p class="list-meta-desc">这是一段描述<br>这是一段描述<br><small class="text-secondary">3分钟前</small></p>
                                        </div>
                                    </div>
                                    这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这这里是描述，这里是描述，这里是描述，这里是描述。里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。
                                    <ul class="list-item-action">
                                        <li>
                                            <span class="hiicon hiicon-star"></span> 12
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-like"></span> 34
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-message"></span> 43
                                        </li>
                                    </ul>
                                    <div class="list-item-extra">
                                        <img src="../images/card.jpg" alt="ListImg">
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="list-item-main">
                                    <div class="list-meta">
                                        <div class="list-meta-avatar">
                                            <img src="http://placehold.it/80x80/1890ff/ffffff?text=Img" alt="ListImg">
                                        </div>
                                        <div class="list-meta-block">
                                            <h4 class="list-meta-title">标题</h4>
                                            <p class="list-meta-desc">这是一段描述<br>这是一段描述<br><small class="text-secondary">3分钟前</small></p>
                                        </div>
                                    </div>
                                    这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这这里是描述，这里是描述，这里是描述，这里是描述。里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。这里是描述，这里是描述，这里是描述，这里是描述。
                                    <ul class="list-item-action">
                                        <li>
                                            <span class="hiicon hiicon-star"></span> 12
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-like"></span> 34
                                            <span class="ant-list-item-action-split"></span>
                                        </li>
                                        <li>
                                            <span class="hiicon hiicon-message"></span> 43
                                        </li>
                                    </ul>
                                    <div class="list-item-extra">
                                        <img src="../images/card.jpg" alt="ListImg">
                                    </div>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="list-foot text-right">
                        <div id="demo-pagination2"></div>
                    </div>
                </div>
            </div>
            <h3 class="site-title">Header 页头<a name="header">#</a></h3>
            <div class="site-info">
                <div class="head">
                    <div class="head-left">
                        <div class="head-back">
                            <span class="hiicon hiicon-arrowleft"></span>
                        </div>
                        <div class="head-title">返回</div>
                        <div class="head-text">这是一个副标题</div>
                    </div>
                    <div class="head-right">
                        <ul class="list-items list-inline">
                            <li class="list-item">
                                <button class="btn btn-link"><span class="hiicon hiicon-search"></span></button>
                            </li>
                            <li class="list-item">
                                <button class="btn btn-link"><span class="hiicon hiicon-reload"></span></button>
                            </li>
                            <li class="list-item">
                                <button class="btn btn-link"><span class="hiicon hiicon-menu"></span></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <h3 class="site-title">Article 文章<a name="article">#</a></h3>
            <div class="site-info">
                <div class="article">
                    <div class="article-head">
                        <h1 class="article-title">HIUI 前端框架</h1>
                    </div>
                    <div class="article-meta">
                        <span class="avatar avatar-circle">
                            <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                        </span>
                        <div class="article-block">
                            <span class="tag tag-primary">原创</span><br>
                            作者：<a href="javascript:;" class="link-reset">小子</a>，发表于2020-10-10
                        </div>
                        <div class="article-meta-extra">
                            <span class="tag tag-primary-outline">关注</span>
                        </div>
                    </div>
                    <p class="article-lead">
                        HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                    </p>
                    <p class="article-body">
                        <p>HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。HIUI 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。</p>
                        <p>HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。HIUI 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。</p>
                    </p>
                    <div class="article-foot">
                        <button class="btn btn-round btn-primary"><i class="hiicon hiicon-like"></i> 点赞 4</button>
                        <button class="btn btn-round btn-primary"><i class="hiicon hiicon-star"></i> 收藏</button>
                        <button class="btn btn-round btn-primary"><i class="hiicon hiicon-share"></i> 分享</button>
                        <button class="btn btn-round btn-link" style="margin-left: 15px;"><i class="hiicon hiicon-ellipsis"></i></button>
                    </div>
                </div>
            </div>
            <h3 class="site-title">Comment 评论<a name="comment">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <div class="comment">
                    <div class="comment-inner">
                        <div class="comment-head">
                            <span class="avatar avatar-circle">
                                <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                            </span>
                        </div>
                        <div class="comment-body">
                            <div class="comment-title">小子 半小时前</div>
                            <div class="comment-desc">
                                HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                            </div>
                            <div class="comment-action">
                                <button class="btn btn-link">回复</button>
                            </div>
                        </div>
                    </div>
                </div>
                <p>嵌套列表</p>
                <div class="list">
                    <div class="list-body">
                        <ul class="list-items">
                            
                            <li class="list-item">
                                <div class="comment">
                                    <div class="comment-inner">
                                        <div class="comment-head">
                                            <span class="avatar avatar-circle">
                                                <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                                            </span>
                                        </div>
                                        <div class="comment-body">
                                            <div class="comment-title">小子 半小时前</div>
                                            <div class="comment-desc">
                                                HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                                            </div>
                                            <div class="comment-action">
                                                <span class="hiicon hiicon-like"></span> 0 <span class="hiicon hiicon-unlike"></span> 0
                                                <button class="btn btn-link">回复</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="comment">
                                    <div class="comment-inner">
                                        <div class="comment-head">
                                            <span class="avatar avatar-circle">
                                                <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                                            </span>
                                        </div>
                                        <div class="comment-body">
                                            <div class="comment-title">小子 半小时前</div>
                                            <div class="comment-desc">
                                                HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                                            </div>
                                            <div class="comment-action">
                                                <span class="hiicon hiicon-like"></span> 0 <span class="hiicon hiicon-unlike"></span> 0
                                                <button class="btn btn-link">回复</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            
                            <li class="list-item">
                                <div class="comment">
                                    <div class="comment-inner">
                                        <div class="comment-head">
                                            <span class="avatar avatar-circle">
                                                <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                                            </span>
                                        </div>
                                        <div class="comment-body">
                                            <div class="comment-title">小子 半小时前</div>
                                            <div class="comment-desc">
                                                HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                                            </div>
                                            <div class="comment-action">
                                                <span class="hiicon hiicon-like"></span> 0 <span class="hiicon hiicon-unlike"></span> 0
                                                <button class="btn btn-link">回复</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                </div>
                <p>嵌套评论</p>
                <div class="comment">
                    <div class="comment-inner">
                        <div class="comment-head">
                            <span class="avatar avatar-circle">
                                <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                            </span>
                        </div>
                        <div class="comment-body">
                            <div class="comment-title">小子 半小时前</div>
                            <div class="comment-desc">
                                HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                            </div>
                            <div class="comment-action">
                                <button class="btn btn-link">回复</button>
                            </div>
                        </div>
                    </div>
                    <div class="comment-nest">
                        <div class="comment">
                            <div class="comment-inner">
                                <div class="comment-head">
                                    <span class="avatar avatar-circle">
                                        <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                                    </span>
                                </div>
                                <div class="comment-body">
                                    <div class="comment-title">小子 半小时前</div>
                                    <div class="comment-desc">
                                        HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                                    </div>
                                    <div class="comment-action">
                                        <button class="btn btn-link">回复</button>
                                    </div>
                                </div>
                            </div>
                            <div class="comment-nest">
                                
                                <div class="comment">
                                    <div class="comment-inner">
                                        <div class="comment-head">
                                            <span class="avatar avatar-circle">
                                                <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                                            </span>
                                        </div>
                                        <div class="comment-body">
                                            <div class="comment-title">小子 半小时前</div>
                                            <div class="comment-desc">
                                                HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                                            </div>
                                            <div class="comment-action">
                                                <button class="btn btn-link">回复</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="comment">
                                    <div class="comment-inner">
                                        <div class="comment-head">
                                            <span class="avatar avatar-circle">
                                                <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                                            </span>
                                        </div>
                                        <div class="comment-body">
                                            <div class="comment-title">小子 半小时前</div>
                                            <div class="comment-desc">
                                                HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                                            </div>
                                            <div class="comment-action">
                                                <button class="btn btn-link">回复</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="comment">
                                    <div class="comment-inner">
                                        <div class="comment-head">
                                            <span class="avatar avatar-circle">
                                                <img src="http://placehold.it/100x100/999999/ffffff?text=U" alt="">
                                            </span>
                                        </div>
                                        <div class="comment-body">
                                            <div class="comment-title">小子 半小时前</div>
                                            <div class="comment-desc">
                                                HIUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
                                            </div>
                                            <div class="comment-action">
                                                <button class="btn btn-link">回复</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h3 class="site-title">Skeleton 骨架图<a name="skeleton">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <div class="skeleton">
                    <h3 class="skeleton-title" style="width:38%"></h3>
                    <ul class="skeleton-list">
                        <li class="skeleton-item"></li>
                        <li class="skeleton-item"></li>
                        <li class="skeleton-item" style="width:61%"></li>
                    </ul>
                </div>
                <p>复杂使用</p>
                <div class="skeleton skeleton-has-avatar">
                    <div class="skeleton-avatar"></div>
                    <div class="skeleton-block">
                        <h3 class="skeleton-title" style="width:38%"></h3>
                        <ul class="skeleton-list">
                            <li class="skeleton-item"></li>
                            <li class="skeleton-item"></li>
                            <li class="skeleton-item" style="width:61%"></li>
                        </ul>
                    </div>
                </div>
                <p>动画</p>
                <div class="skeleton skeleton-active">
                    <h3 class="skeleton-title" style="width:38%"></h3>
                    <ul class="skeleton-list">
                        <li class="skeleton-item"></li>
                        <li class="skeleton-item"></li>
                        <li class="skeleton-item" style="width:61%"></li>
                    </ul>
                </div>
            </div>
            <h3 class="site-title">Result 结果页<a name="result">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <div class="result">
                    <div class="result-icon">
                        <span class="hiicon hiicon-check-circle-fill"></span>
                    </div>
                    <div class="result-title">操作成功</div>
                    <div class="result-subtitle">订单编号：12212121212</div>
                    <div class="result-extra">
                        <button class="btn btn-primary">返回首页</button>
                        <button class="btn">再次购买</button>
                    </div>
                </div>
                <p>错误信息</p>
                <div class="result">
                    <div class="result-icon">
                        <span class="hiicon hiicon-close-circle-fill"></span>
                    </div>
                    <div class="result-title">操作失败</div>
                    <div class="result-subtitle">请检查你提交的内容！</div>
                    <div class="result-body">
                        <div class="result-desc"><strong>您访问的页面有以下错误：</strong></div>
                        <div class="result-desc">您没有权限访问! <a href="javascript:;">去申请</a></div>
                        <div class="result-desc">您的账户被冻结! <a href="javascript:;">去解冻</a></div>
                    </div>
                    <div class="result-extra">
                        <button class="btn btn-primary">返回</button>
                        <button class="btn">继续购买</button>
                    </div>
                </div>
                <p>图片</p>
                <div class="result">
                    <div class="result-icon">
                        <img src="../images/404.png" alt="404" width="250px" height="290px">
                    </div>
                    <div class="result-title">404</div>
                    <div class="result-subtitle">您访问的页面不存在!</div>
                    <div class="result-extra">
                        <button class="btn btn-primary">返回首页</button>
                    </div>
                </div>
                <div class="result">
                    <div class="result-icon">
                        <img src="../images/404.png" alt="404" width="250px" height="290px">
                    </div>
                    <div class="result-title">403</div>
                    <div class="result-subtitle">您没有访问权限!</div>
                    <div class="result-extra">
                        <button class="btn btn-primary">返回首页</button>
                    </div>
                </div>
                <div class="result">
                    <div class="result-icon">
                        <img src="../images/404.png" alt="404" width="250px" height="290px">
                    </div>
                    <div class="result-title">500</div>
                    <div class="result-subtitle">服务器出现异常!</div>
                    <div class="result-extra">
                        <button class="btn btn-primary">返回首页</button>
                    </div>
                </div>
            </div>
            <h3 class="site-title">Divider 分割线<a name="divider">#</a></h3>
            <div class="site-info">
                <p>默认水平分割线</p>
                <div class="divider"></div>
                <p>居中文字</p>
                <div class="divider divider-text-center">
                    <span class="divider-text">居中文字</span>
                </div>
                <p>居左文字</p>
                <div class="divider divider-text-left">
                    <span class="divider-text">居左文字</span>
                </div>
                <p>居右文字</p>
                <div class="divider divider-text-right">
                    <span class="divider-text">居右文字</span>
                </div>
                <p>行内分割线</p>
                链接<div class="divider divider-vertical"></div><a href="javascript:;">链接</a>
                <div class="divider divider-vertical"></div><a href="javascript:;">链接</a>
            </div>
            <h3 class="site-title">Progress 进度条<a name="progress">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <div class="progress">
                    <div class="progress-outer">
                        <div class="progress-inner">
                            <div class="progress-bg" style="width:50%"></div>
                        </div>
                    </div>
                </div>
                <div class="progress progress-has-text">
                    <div class="progress-outer">
                        <div class="progress-inner">
                            <div class="progress-bg" style="width:30%"></div>
                        </div>
                    </div>
                    <div class="progress-text">30%</div>
                </div>
                <div class="progress progress-has-text">
                    <div class="progress-outer">
                        <div class="progress-inner">
                            <div class="progress-bg" style="width:50%"></div>
                        </div>
                    </div>
                    <div class="progress-text">50%</div>
                </div>
                <div class="progress progress-has-text">
                    <div class="progress-outer">
                        <div class="progress-inner"></div>
                    </div>
                    <div class="progress-text">
                        <span class="hiicon hiicon-check-circle-fill"></span>
                    </div>
                </div>
                <div class="progress progress-has-text">
                    <div class="progress-outer">
                        <div class="progress-inner"></div>
                    </div>
                    <div class="progress-text">
                        <span class="hiicon hiicon-close-circle-fill"></span>
                    </div>
                </div>
                <p>内显</p>
                <div class="progress progress-has-text progress-inside">
                    <div class="progress-outer">
                        <div class="progress-inner">
                            <div class="progress-bg" style="width:30%">
                                <div class="progress-text">30%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="progress progress-has-text progress-inside">
                    <div class="progress-outer">
                        <div class="progress-inner">
                            <div class="progress-bg" style="width:50%">
                                <div class="progress-text">50%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <p>进度圈</p>
                <div class="progress progress-circle">
                    <div class="progress-outer">
                        <div class="progress-inner">
                            <svg class="progress-circle-svg" viewBox="0 0 100 100">
                                <path class="progress-circle-trail" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s;"></path>
                                <path class="progress-circle-path" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 221.482px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s;"></path>
                            </svg>
                            <div class="progress-text">75%</div>
                        </div>
                    </div>
                </div>
                <div class="progress progress-circle">
                    <div class="progress-outer">
                        <div class="progress-inner">
                            <svg class="progress-circle-svg" viewBox="0 0 100 100">
                                <path class="progress-circle-trail" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s;"></path>
                                <path class="progress-circle-path-success" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 221.482px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s;"></path>
                            </svg>
                            <div class="progress-text">
                                <span class="hiicon hiicon-check"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="progress progress-circle">
                    <div class="progress-outer">
                        <div class="progress-inner">
                            <svg class="progress-circle-svg" viewBox="0 0 100 100">
                                <path class="progress-circle-trail" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s;"></path>
                                <path class="progress-circle-path-danger" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 221.482px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s;"></path>
                            </svg>
                            <div class="progress-text">
                                <span class="hiicon hiicon-close"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h3 class="site-title">Tree 树形结构<a name="tree">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <div class="tree">
                    <div class="tree-list">
                        <div class="tree-node">
                            <div class="tree-node-wraper">
                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                <div class="tree-node-title">节点1</div>
                            </div>
                            <div class="tree-list">
                                <div class="tree-node">
                                    <div class="tree-node-wraper">
                                        <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                        <div class="tree-node-title">节点1.1</div>
                                    </div>
                                    <div class="tree-list">
                                        <div class="tree-node">
                                            <div class="tree-node-wraper">
                                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                                <div class="tree-node-title">节点1.1.1</div>
                                            </div>
                                        </div>
                                        <div class="tree-node">
                                            <div class="tree-node-wraper">
                                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                                <div class="tree-node-title">节点1.1.2</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tree-node">
                                    <div class="tree-node-wraper">
                                        <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                        <div class="tree-node-title">节点1.2</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tree-node">
                            <div class="tree-node-wraper">
                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                <div class="tree-node-title">节点2</div>
                            </div>
                            <div class="tree-list">
                                <div class="tree-node">
                                    <div class="tree-node-wraper">
                                        <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                        <div class="tree-node-title">节点2.1</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p>可选择</p>
                <div class="tree">
                    <div class="tree-list">
                        <div class="tree-node">
                            <div class="tree-node-wraper">
                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                <div class="tree-node-check"><span class="hiicon hiicon-border"></span></div>
                                <div class="tree-node-title">节点1</div>
                            </div>
                            <div class="tree-list">
                                <div class="tree-node">
                                    <div class="tree-node-wraper">
                                        <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                        <div class="tree-node-check"><span class="hiicon hiicon-minus-square-fill"></span></div>
                                        <div class="tree-node-title">节点1.1</div>
                                    </div>
                                    <div class="tree-list">
                                        <div class="tree-node">
                                            <div class="tree-node-wraper">
                                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                                <div class="tree-node-check"><span class="hiicon hiicon-check-square-fill"></span></div>
                                                <div class="tree-node-title">节点1.1.1</div>
                                            </div>
                                        </div>
                                        <div class="tree-node tree-node-disabled">
                                            <div class="tree-node-wraper">
                                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                                <div class="tree-node-check"><span class="hiicon hiicon-check-square-fill"></span></div>
                                                <div class="tree-node-title">节点1.1.2</div>
                                            </div>
                                        </div>
                                        <div class="tree-node tree-node-disabled">
                                            <div class="tree-node-wraper">
                                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                                <div class="tree-node-check"><span class="hiicon hiicon-border"></span></div>
                                                <div class="tree-node-title">节点1.1.3</div>
                                            </div>
                                        </div>
                                        <div class="tree-node">
                                            <div class="tree-node-wraper">
                                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                                <div class="tree-node-check"><span class="hiicon hiicon-border"></span></div>
                                                <div class="tree-node-title">节点1.1.3</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tree-node">
                                    <div class="tree-node-wraper">
                                        <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                        <div class="tree-node-check"><span class="hiicon hiicon-border"></span></div>
                                        <div class="tree-node-title">节点1.2</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tree-node">
                            <div class="tree-node-wraper">
                                <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                <div class="tree-node-check"><span class="hiicon hiicon-check-square-fill"></span></div>
                                <div class="tree-node-title">节点2</div>
                            </div>
                            <div class="tree-list">
                                <div class="tree-node">
                                    <div class="tree-node-wraper">
                                        <div class="tree-node-switch"><span class="hiicon hiicon-caret-right"></span></div>
                                        <div class="tree-node-check"><span class="hiicon hiicon-check-square-fill"></span></div>
                                        <div class="tree-node-title">节点2.1</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h3 class="site-title">Popover 气泡卡片<a name="popover">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
            </div>
            <h3 class="site-title">LoadingBar 加载进度条<a name="loadingbar">#</a></h3>
            <div class="site-info">
                <button class="btn btn-primary" id="demo-loadingbar-start">开始</button>
                <button class="btn btn-primary" id="demo-loadingbar-end">结束</button>
            </div>
            <h3 class="site-title">Pagination 分页<a name="pagination">#</a></h3>
            <h4 class="site-subtitle">1. 基础分页</h4>
            <div class="site-info">
                <div id="demo-pagination1"></div>
            </div>
            <h3 class="site-title">Message 全局提示<a name="message">#</a></h3>
            <div class="site-info">
                <button class="btn btn-primary" id="demo-message-info">信息</button>
                <button class="btn btn-warning" id="demo-message-warning">警告</button>
                <button class="btn btn-danger" id="demo-message-danger">错误</button>
                <button class="btn btn-success" id="demo-message-success">成功</button>
            </div>
            <h3 class="site-title">Notice 通知提醒<a name="notice">#</a></h3>
            <div class="site-info">
                <button class="btn btn-primary" id="demo-notice-top">向上提示</button>
                <button class="btn btn-warning" id="demo-notice-right">向右提示</button>
                <button class="btn btn-danger" id="demo-notice-bottom">向下提示</button>
                <button class="btn btn-success" id="demo-notice-left">向左提示</button>
            </div>
            <h3 class="site-title">Dialog 模态框<a name="dialog">#</a></h3>
            <div class="site-info">
                <button class="btn btn-primary" id="demo-dialog">栗子</button>
            </div>
            <h3 class="site-title">Collapse 折叠面板<a name="collapse">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <div data-toggle="collapse" class="collapse">
                    
                    <div class="collapse-item collapse">
                        <div class="collapse-head">
                            <div class="collapse-head-left">
                                <span class="hiicon hiicon-right"></span>
                                折叠面板
                                1
                            </div>
                            <div class="collapse-head-right">
                                <span class="tag">3</span>
                            </div>
                        </div>
                        <div class="collapse-body">
                            这里是折叠内容
                        </div>
                    </div>
                    
                    <div class="collapse-item">
                        <div class="collapse-head">
                            <div class="collapse-head-left">
                                <span class="hiicon hiicon-right"></span>
                                折叠面板
                                2
                            </div>
                            <div class="collapse-head-right">
                                <span class="tag">3</span>
                            </div>
                        </div>
                        <div class="collapse-body">
                            这里是折叠内容
                        </div>
                    </div>
                    
                    <div class="collapse-item">
                        <div class="collapse-head">
                            <div class="collapse-head-left">
                                <span class="hiicon hiicon-right"></span>
                                折叠面板
                                3
                            </div>
                            <div class="collapse-head-right">
                                <span class="tag">3</span>
                            </div>
                        </div>
                        <div class="collapse-body">
                            这里是折叠内容
                        </div>
                    </div>
                    
                </div>
                <p>手风琴</p>
                <div data-toggle="collapse" class="collapse" data-options="{multiple: true}">
                    
                    <div class="collapse-item">
                        <div class="collapse-head">
                            <div class="collapse-head-left">
                                <span class="hiicon hiicon-right"></span>
                                折叠面板
                                1
                            </div>
                            <div class="collapse-head-right">
                                <span class="tag">3</span>
                            </div>
                        </div>
                        <div class="collapse-body">
                            这里是折叠内容1<br>
                            这里是折叠内容2<br>
                            这里是折叠内容3
                        </div>
                    </div>
                    
                    <div class="collapse-item collapse">
                        <div class="collapse-head">
                            <div class="collapse-head-left">
                                <span class="hiicon hiicon-right"></span>
                                折叠面板
                                2
                            </div>
                            <div class="collapse-head-right">
                                <span class="tag">3</span>
                            </div>
                        </div>
                        <div class="collapse-body">
                            这里是折叠内容1<br>
                            这里是折叠内容2<br>
                            这里是折叠内容3
                        </div>
                    </div>
                    
                    <div class="collapse-item disabled">
                        <div class="collapse-head">
                            <div class="collapse-head-left">
                                <span class="hiicon hiicon-right"></span>
                                折叠面板
                                3
                            </div>
                            <div class="collapse-head-right">
                                <span class="tag">3</span>
                            </div>
                        </div>
                        <div class="collapse-body">
                            这里是折叠内容1<br>
                            这里是折叠内容2<br>
                            这里是折叠内容3
                        </div>
                    </div>
                    
                </div>
            </div>
            <h3 class="site-title">Tooltip 文字提示<a name="tooltip">#</a></h3>
            <div class="site-info">
                <p>演示</p>
                <div class="tooltip tooltip-left site-tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-content">
                        我在左边
                    </div>
                </div>
                <div class="tooltip tooltip-top site-tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-content">
                        我在上边
                    </div>
                </div>
                <div class="tooltip tooltip-bottom site-tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-content">
                        我在下边
                    </div>
                </div>
                <div class="tooltip tooltip-right site-tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-content">
                        我在右边
                    </div>
                </div>
                <p>简单用法</p>
                <span data-toggle="tooltip" title="这是一个简单的文字提示">这是一个简单的文字提示</span>
                <p>位置</p>
                <button class="btn" data-toggle="tooltip" data-options="{position: 'top', title: '提示内容:上边对齐'}">上边对齐</button>
                <button class="btn" data-toggle="tooltip" data-options="{position: 'bottom', title: '提示内容:下边对齐'}">下边对齐</button>
                <button class="btn" data-toggle="tooltip" data-options="{position: 'left', title: '提示内容:左边对齐'}">左边对齐</button>
                <button class="btn" data-toggle="tooltip" data-options="{position: 'right', title: '提示内容:右边对齐'}">右边对齐</button>
                <p>垂直对齐</p>
                <button class="btn" data-toggle="tooltip" data-options="{position: 'left', valign: 'left', title: '提示内容:<br/>左边对齐'}">左边对齐</button>
                <button class="btn" data-toggle="tooltip" data-options="{position: 'left', valign: 'middle', title: '提示内容:<br/>左边对齐'}">左边对齐</button>
                <button class="btn" data-toggle="tooltip" data-options="{position: 'right', 'valign': 'right', title: '提示内容:<br/>右边对齐'}">右边对齐</button>
                <button class="btn" data-toggle="tooltip" data-options="{position: 'right', valign: 'middle', title: '提示内容:<br/>右边对齐'}">右边对齐</button>
                <p>颜色</p>
                <button class="btn" data-toggle="tooltip" data-options="{title: '提示内容:默认黑色'}">默认黑色</button>
                <button class="btn" data-toggle="tooltip" data-options="{color: 'red', title: '提示内容:红色'}">红色</button>
                <button class="btn" data-toggle="tooltip" data-options="{color: 'green', title: '提示内容:绿色'}">绿色</button>
                <button class="btn" data-toggle="tooltip" data-options="{className:'test-tooltip', color: 'blue', title: '提示内容:蓝色'}">蓝色</button>
                <p>跟踪鼠标</p>
                <button class="btn" data-toggle="tooltip" data-options="{position: 'top', trackMouse: true}" title="跟踪鼠标我">跟踪鼠标我</button>
                <button class="btn" data-toggle="tooltip" data-options="{trackMouse: true}" title="跟踪鼠标我">跟踪鼠标我</button>
                <button class="btn" data-toggle="tooltip" data-options="{trackMouse: true, position:'left'}" title="跟踪鼠标我">我在左边</button>
                <button class="btn" data-toggle="tooltip" data-options="{trackMouse: true, position:'right'}" title="跟踪鼠标我">我在右边</button>
            </div>
            <h3 class="site-title">Poptip 气泡提示<a name="poptip">#</a></h3>
            <div class="site-info">
                <button class="btn btn-primary" id="demo-message-info">栗子</button>
            </div>
            <h3 class="site-title">Carousel 走马灯<a name="carousel">#</a></h3>
            <div class="site-info">
                <button class="btn btn-primary" id="demo-message-info">栗子</button>
            </div>
        </div>
    </div>
    <div class="site-footer">
    <ul class="site-nav">
        <li class="site-nav-item">
            <a class="site-nav-link">案例</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">联系</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">GitHub</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">码云</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">微信公众号</a>
        </li>
    </ul>
    <p class="copyright">© 2018 <a href="/">http://www.hiui.com</a> MIT license</p>
</div>

    <script type="text/javascript" src="../../scripts/site.js"></script>
</body>

</html>